<template>
  resetForm
  <div>
    <el-card class="box-card">
      <template #header>
        <el-button type="primary" :icon="Plus" @click="spuAdd"
          >添加SPU</el-button
        >
      </template>
      <el-table v-loading="loading" :data="records" border>
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="spuName" label="SPU名称" />
        <el-table-column label="SPU描述" prop="description"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              :icon="Plus"
              @click="addSkudata(row)"
            ></el-button>
            <el-button
              type="primary"
              :icon="Edit"
              @click="ReviseSpudata(row)"
            ></el-button>
            <el-button
              type="info"
              :icon="InfoFilled"
              @click="CheckSpudata"
            ></el-button>
            <el-button
              type="danger"
              :icon="Delete"
              @clic="removeSpudata"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- 
      分页器组件
        currentPage    当前页码
        page-size      每页条数
        page-sizes     每页条数的选项
        small     是否渲染小组件
        layout    要加载的组件
          total, 总数
          sizes, 每页条数的选项
          prev, 前翻页
          pager, 显示页码
          next, 后翻页
          jumper 快速跳转至某页面
          -> 让内容去右边
        total 总数

      @size-change  当page-size发生改变的时候触发   
          先更新page-size的值,再触发时间
          因为v-model双向数据绑定的属性,所以当前组件的pageSzie的值也更新了,然后触发的事件
      @current-change 当currentPage发生改变的时候触发
     -->
      <!-- 分页器ui组件 -->
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout=" prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @size-change="getspuList"
        @current-change="getTrademarkList"
      />
      <!-- <el-pagination style="margin-top: 20px; text-align: center;" v-model:currentPage="5" v-model:page-size="pageSize4"
      :page-sizes="[3, 6, 9]" :total="100" layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="handleSizeChange" @size-change="handleCurrentChange" /> -->
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "SpuTable",
};
</script>

<script lang="ts" setup>
import { Plus, Edit, Delete, InfoFilled } from "@element-plus/icons-vue";
import { ref, onMounted, reactive, watch, defineEmits } from "vue";
import { getPaginationspuList } from "@/Api/product/spu";
import type { SpuFormData } from "@/Api/product/model/spu";
import type {
  spuRecordsList,
  getspuListts,
  GetSpuRecordsArray,
} from "@/Api/product/model/spu";

// import type { FormInstance, FormRules } from "element-plus";
import { useCategoryStore } from "@/stores/category";
import { ElMessage } from "element-plus";
const CategoryStore = useCategoryStore();

// import axios from 'axios'
// 当前页码
const currentPage = ref(1);
// 数据总条数
const total = ref(0);
const background = ref(false);
// 每页显示几条数据

const disabled = ref(false);
const small = ref(false);
const pageSize = ref(5);

const loading = ref(false);

// 品牌管理页面的添加功能的点击事件 是否弹出对话框进行添加数据
// const Visible = ref(false);

//添加按钮显示添加页面

const emit = defineEmits(["setIsShow", "setSpu"]);
// 添加按钮回调函数
const spuAdd = () => {
  // console.log(1);
  emit("setIsShow", 2);
};

const SpukObjList = reactive<spuRecordsList>({
  current: 0,
  pages: 0,
  records: [],
  searchCount: true,
  size: 0,
  total: 0,
});
const records = ref<GetSpuRecordsArray>([]);

onMounted(async () => {
  // page: number, limit: number, category3Id: number
  if (CategoryStore.category3Id) {
    gettabledata();
  }
});

// 封装获取表达数据 请求接口
const gettabledata = async () => {
  loading.value = true;
  const obj: getspuListts = {
    page: currentPage.value,
    limit: pageSize.value,
    category3Id: CategoryStore.category3Id as number,
  };
  const result = await getPaginationspuList(obj);
  // SpukObjList.records = result.records;
  records.value = result.records;
  total.value = result.total;
  result.total < result.size
    ? (pageSize.value = result.total)
    : (pageSize.value = result.size);
  loading.value = false;
  ElMessage.success("获取SPU列表成功");
};

watch(
  () => CategoryStore.category3Id,
  async () => {
    if (!CategoryStore.category3Id) {
      records.value = [];
      currentPage.value = 1;
      pageSize.value = 3;
      total.value = 0;
      return;
    }
    gettabledata();
  },
  {
    immediate: true,
  }
);

watch(currentPage, async () => {
  if (!CategoryStore.category3Id) return;
  gettabledata();
});

const getTrademarkList = () => {
  console.log(1);
};
const getspuList = () => {
  console.log(1);
};
const addSkudata = (row: SpuFormData) => {
  emit("setSpu", row);
  emit("setIsShow", 3);
};
const ReviseSpudata = (row: SpuFormData) => {
  emit("setSpu", {
    ...row,
    // 默认row中数据是null，null在更新组件使用会报错
    spuImageList: [],
    spuSaleAttrList: [],
  });
  emit("setIsShow", 2);
};
const CheckSpudata = () => {
  console.log(1);
};
const removeSpudata = () => {
  console.log(1);
};
const addOrUpdate = () => {
  console.log(1);
};
</script>

<!-- 局部组件样式开始  -->

<style scoped>
.trademark-img {
  width: 150px;
  height: 100px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/* 删除成功提示框 */
.el-alert {
  margin: 20px 0 0;
}

.el-alert:first-child {
  margin: 0;
}

/* 删除成功提示框 */
</style>
<!-- 局部组件样式结束 -->

<!-- 全局导入总样式开始  -->
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<!-- 全局导入总样式结束  -->
